<template>
    <!-- 头部 -->
    <div class="topBox">
      <div class="L"><a href="index.html">马上购物</a></div>
      <div class="C">
        <div class="saerchbox">
          <input name="" type="text" placeholder="请输入您要搜索的内容" v-model="keyword" @change="search"><img src="/assets/images/ss.png">
        </div>
      </div>
      <div class="R"><img src="/assets/images/tr.png"></div>
    </div>
  
    <!-- 轮播图 -->
    <div class="aui-m-slider">
      <van-swipe :height="250" v-if="recommendList" :autoplay="3000" lazy-render>
        <router-link v-for="item in recommendList" :key="item.id" :to="{path:'/product/detail',query:{proid:item.id}}">
          <van-swipe-item >
            <img style="height: 100%;width: 100%;" :src="item.thumbs_text" />
          </van-swipe-item>
        </router-link>
       
      </van-swipe>
    </div>
  
    <!-- 分类 -->
    <div class="lqgwBox">
      <ul v-if="typeList">
        <li v-for="item in typeList" :key="item.id">
          <router-link :to="{'name':'productIndex','query':{id:item.id,name:item.name}}">
            <img :src="item.thumbs_text">
            <p>{{item.name}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  
    <!-- 广告图 -->
    <div class="adBox">
      <img src="/assets/images/banner.jpg">
    </div>
    
    <!-- 推荐商品 -->
    <ul class="proul" v-if="newList">
      <li v-for="item in newList" :key="item.id">
        <div class="con">
          <router-link :to="{path:'/product/detail',query:{proid:item.id}}">
            <img style="height: 170px;" :src="item.thumbs_text">
            <p><span></span>{{item.name}}</p>
            <p><span>￥</span>{{item.price}}</p>
          </router-link>
        </div>
      </li>
    </ul>
  
    <!-- 底部 -->
    <tabbar />
    
  </template>
  
  <script setup>
    import tabbar from '@/components/tabbar.vue'
    import { onMounted, reactive } from 'vue';
    const {proxy} = getCurrentInstance()
    let keyword = ref("")

    onMounted(()=>{
      getProduct()
    })

    let typeList = ref([]);
    let newList = ref([]);
    let recommendList = ref([]);
      
    const getProduct = async ()=>{
        let result = await proxy.$POST({
          url:"/index/index",
        })
        if(result.code){
          const {data} = result
          newList.value = data.new?data.new:[]
          typeList.value = data.type?data.type:[]
          recommendList.value = data.recommend?data.recommend:[]
        }else{
          proxy.$fail(result.msg)
          return false
        }
    }

    const search = () => {
      proxy.$router.push({
        path:"/product/index",
        query:{
          keyword:keyword.value,
          id:0,
          name:"全部分类"
        }
      })
    }


  </script>